import React from 'react';
import { Tabs, Row, Col, Icon } from 'antd';
const TabPane = Tabs.TabPane;

const SolutionTabContent = ({ question, solution }) => {
  return (
    <div className='solution-tab-content'>
      <br />
      <br />
      <Row>
        <Col span={12} className='solution-tab-line'>
          <div className='solution-tab-title'>面临问题 <Icon type="question-circle" /></div>
          <div className='solution-tab-content'>{question}</div>
        </Col>
        <Col span={12} >
          <div className='solution-tab-title'>解决方案 <Icon type="check-circle" /></div>
          <div className='solution-tab-content'>{solution}</div>
        </Col>
      </Row>
      <br />
      <br />
    </div>
  )
}

const SolutionTab = ({ data }) => {
  const tabs = data.tabs || [];
  return (
    <div className='web-page-block solution-tab'>
      <div className='web-page-block-content'>
        <div className='web-title'><span>{data.title}</span></div>
        <Tabs defaultActiveKey="1" className={`solution-tab-${tabs.length}`}>
          {
            tabs.map(item => <TabPane tab={item.text} key={item.key}><SolutionTabContent {...item} /></TabPane>)
          }
        </Tabs>
      </div>
    </div>
  );
}

export default SolutionTab;